<style lang="scss">
  @import '@/assets/css/variable';
  .apply{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: $main-bgc;
    min-height: 100%;
    font-size: 1.2rem;
    overflow: auto;
    box-sizing: border-box;
    .door-header-box{
      width: 100%;
      height: 20rem;
      position: relative;
      overflow: hidden;
      img{
        width: 100%;
        max-height: 20rem;
        object-fit: cover;
      }
      .change-pic{
        position: absolute;
        width: 10rem;
        height: 2.8rem;
        right: 0rem;
        bottom: 0.1rem;
        border-top-left-radius: 0.6rem;
        // border-bottom-right-radius: 0.6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba($color: #000000, $alpha: 0.7);
        color: white;
        font-size: 1.2rem;
      }
    }
  }
</style>
<template>
  <div class="apply">
    <van-cell-group>
      <van-field v-if="isShow('stuname')>=0" required v-model="form.stuname" label="姓名" maxlength="12" placeholder="请输入姓名" />
	  <van-field v-if="isShow('sex')>=0" required name="radio" label="性别">
	    <template #input>
	      <van-radio-group v-model="form.sex" direction="horizontal">
	        <van-radio name="1">男</van-radio>
	        <van-radio name="2">女</van-radio>
	      </van-radio-group>
	    </template>
	  </van-field>
	  <van-field
		v-if="isShow('birthday')>=0"
		required
	    readonly
	    clickable
	    name="datetimePicker"
	    :value="form.birthday"
	    label="出生年月"
	    placeholder="点击选择时间"
	    @click="showPicker = true"
	  />
	 <van-popup v-model="showPicker" position="bottom">
	 	<van-datetime-picker
	 	  v-model="currentDate"
	 	  type="date"
	 	  title="选择年月日"
	 	  :min-date="minDate"
	 	  :max-date="maxDate"
	 	  @confirm="confirm"
	 	  @cancel="cancel"
	 	/>
		
		<!-- :formatter="formatter" -->
	 </van-popup>
	 <van-action-sheet v-model="showEducation" :actions="actions" @select="onSelect" />
	 <van-action-sheet v-model="showArea" :actions="actionsArea" @select="onSelectArea" />
	 <van-field v-if="isShow('idcard')>=0" required v-model="form.idcard" maxlength="18" label="身份证号" placeholder="请输入身份证号" @blur="judgeIdCard(form)"/>
	 <van-field v-if="isShow('phone')>=0" required v-model="form.phone" maxlength="11" label="手机号" placeholder="请输入手机号" @blur="judgePhone(form)"/>
	 <van-field v-if="isShow('area')>=0" required v-model="form.area" @click="showArea = true" maxlength="20" label="所在乡镇" placeholder="请输入所在乡镇" />
	 <van-field v-if="isShow('address')>=0" required v-model="form.address" label="家庭住址" maxlength="50" placeholder="请输入家庭住址" />
	 <van-field v-if="isShow('education')>=0" required v-model="form.education" @click="showEducation = true" maxlength="11" label="学历" readonly placeholder="请输入学历" />
	 <van-field v-if="isShow('nums')>=0" required v-model="form.nums" maxlength="24" label="学号" placeholder="请输入学号" />
     <van-field v-if="isShow('remark')>=0" v-model="form.remark" maxlength="100" label="备注" placeholder="请输入备注" />
    </van-cell-group>
    <div class="margT-l padding-lr">
      <van-button :color="$store.state.masterColor" size="large" block @click="submit">提交</van-button>
    </div>
  </div>
</template>

<script>
import {Toast,Notify,Dialog } from 'vant';
import { areaList } from '@vant/area-data';
import utils from '@/assets/js/utils.js';
export default {
  name: "apply",
  components: {
  },
  data() {
    return {
      openid: "",
      showArea: false,
      areaList,
      data: '',
      form: {
        stuname: "",
        sex: "",
        birthday: "",
        idcard: "",
		phone:"",
        area: "",
        address: "",
        education: "",
		nums:"",
		remark:"",
		other:""
      },
	  minDate: new Date(1900, 1, 1),
	  maxDate: new Date(2031, 1, 1),
	  currentDate: new Date(),
	  showPicker:false,
	  keys:'',
	  actions: [{ name: '小学' }, { name: '初中' }, { name: '高中' }, { name: '大学' }],
	  actionsArea: [{ name: '昆阳镇' }, { name: '鳌江镇' }, { name: '水头镇' }, { name: '萧江镇' },
	  { name: '南雁镇' }, { name: '南麂镇' }, { name: '麻步镇' }, { name: '腾蛟镇' }, { name: '钱仓镇' },
	  { name: '山门镇' }, { name: '顺溪镇' }, { name: '凤卧镇' }, { name: '鹤溪镇' }, { name: '宋桥镇' },
	  { name: '宋埠镇' },{ name: '榆垟镇' },{ name: '郑楼镇' },{ name: '闹村乡' },{ name: '西湾乡' },{ name: '梅溪乡' },
	  { name: '梅源乡' },{ name: '桃源乡' },{ name: '凤巢乡' },{ name: '龙尾乡' },{ name: '南湖乡' }],
	  showEducation:false
    }
  },
  created () {
    // this.ClasscourseItems()
	let keys = []
	let form = {}
	let model = JSON.parse(localStorage.getItem('model'))
	console.log('model',model)
	model.forEach(item=>{
		keys.push(item.dataindex)
		form[item.dataindex] = ''
	})
	this.keys = keys
	console.log('keys',this.keys)
	this.form = form
	console.log('form',this.form)
	//  for(let key  in model){
	//         console.log(key + '---' + model[key])
	//   }
	// console.log('model1',model)
	// console.log('key:',Object.keys(model))
	// const keys = Object.keys(model)
	// this.keys = keys
	// keys.forEach(key=>{
	// 	model[key]=''
	// })
	// console.log('model2',model)
	// this.form = model
	// console.log('form',this.form)
	// console.log("isShow",this.isShow('sex'))
  },
  methods: {
	  onSelect(item) {
		// 默认情况下点击选项时不会自动收起
		// 可以通过 close-on-click-action 属性开启自动收起
		this.showEducation = false;
		// Toast(item.name);
		this.form.education = item.name
	  },
	  onSelectArea(item) {
	  		// 默认情况下点击选项时不会自动收起
	  		// 可以通过 close-on-click-action 属性开启自动收起
	  		this.showArea = false;
	  		// Toast(item.name);
	  		this.form.area = item.name
	  },
	  isShow(key){
		  return this.keys.indexOf(key)
	  },
	  validateIdCard(){
		  if(!this.$reg.idcard.test(params.idcard)){
			  Notify('通知内容');
		  }
	  },
	  judgeIdCard(params) {
		  if(params.idcard){
			  if(this.$reg.idcard.test(params.idcard)){
			  	return true
			  }else{
				  Dialog.alert({
					title: '系统提示',
					message: '请正确填写身份证号',
				  }).then(() => {
					// on close
					return false
				  });
				  return false
			  }
		  }
	  },
	  judgePhone(params) {
		  if(params.phone) {
			 if(this.$reg.phone.test(params.phone)){
			 	return true
			 }else{
				Dialog.alert({
					title: '系统提示',
					message: '请正确填写手机号',
				}).then(() => {
					// on close
					return false
				});
				return false
			 }
		  }
	  },
	  submit() {
	    let params = this.form
		params.curriculum_id = this.$route.query.course_id
		params.campus_id = JSON.parse(localStorage.getItem('selectedCampus')).id
		params.openid = this.$store.state.openid || localStorage.getItem('openid')
		params.model_id = this.$route.query.model_id
		if(!params.remark){
			params.remark = '--'
		}
	    console.log('params',params)
		console.log("this.$utils.hasNull(params)",this.$utils.hasNull(params))
		if(this.$utils.hasNull(params)){
			Toast('请填写完整信息');
			return;
		}
		console.log('this.judgeIdCard(params)',this.judgeIdCard(params))
		if(params.idcard&&!this.judgeIdCard(params)){
			return
		}
		console.log('this.judgePhone(params)',this.judgePhone(params))
		if(params.phone&&!this.judgePhone(params)){
			return
		}
		console.log('ApplyRecordSave')
	    this.$request.ApplyRecordSave(params).then(res=>{
	      if(res.ret == 200) {
	        Toast.success('报名成功');
			this.$router.go(-1)
	      }
	    })
	  },
	  ClasscourseItems() {
		let params = {
			course_id: this.$route.query.course_id
		}
		this.$request.ClasscourseItems(params).then(res=>{
		  if(res.ret == 200) {
		    
		  }
		})
	  },
    uploadBtn() {
      // this.$refs.fileInput.click()
    },
	cancel() {
		this.showPicker = false
	},
	formatter(type, val) {
	  if (type === 'year') {
		return `${val}年`;
	  } else if (type === 'month') {
		return `${val}月`;
	  }
	  return val;
	},
    confirm(val) {
      console.log("values", val)
	  this.form.birthday = this.$utils.parseToDateYMD(val)
	  this.showPicker = false
    },
  }
};
</script>
